<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title></title>


</head>
<body class="hold-transition skin-blue sidebar-mini">
<div th:fragment="SmokeHistoryNews">
	<style>
		.smokeCharts{
			width:100%;
			height:100%;
		    right: -100%;
		}
		.right100 {
		    right: -100%;
		}
	</style>
    <div class="historyNewsStyle">
		
        <aside class="control-sidebar control-sidebar-dark historyHeight openPublicSidebar smokeCharts">
           <div class="contorl-sidebar-halfheight-top">
           			<div class="sidebar-content-title">七日内报警统计</div>
           			<!-- 插入chart -->
           			<div class="sidebar-charts">
           				<div id="myChart" style="width: 330px;height:250px;"></div>
           				<div id="myCharts" style="width: 330px;height:250px;"></div>
							<!-- 插入图表 -->
           				</div>
           			<div class="sidebar-content-title" id="guanzhu">七日内重点关注对象<span>（0）</span></div>
           			<div class="sidebar-object-list">
           					<ul class="object-ul">
								<!-- TODO -->
           					</ul>           			
           			</div>
           </div>
           <div class="control-sidebar-halfheight">
           <div class="sidebar-content-title historyTitle">七日内历史消息</div>
	            <ul class="nav nav-tabs nav-justified control-sidebar-tabs historybtn">
	            <!-- 火警 -->
	                <li class="alarmhistorybtn active"><a href="#control-sidebar-theme-demo-options-tab" data-toggle="tab"><i
	                        class=""></i></a></li><!-- <span class="cover-alarm-tab"></span> /icons/cover.svg -->
	                        <!-- 故障 -->
	                <li class="faulthistorybtn"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="malfunction-tab"></i></a></li>
	                <!-- 低电 -->
	                <li class="lowhistorybtn"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="low-electric-tab"></i></a></li>
	            </ul>
	            <div class="tab-content historyList">
	                <!--故障历史信息-->
	                <div class="tab-pane" id="control-sidebar-home-tab">
	                    <!-- TODO -->
	                </div>
	                <!--火警历史信息-->
	                <div id="control-sidebar-theme-demo-options-tab" class="tab-pane active">
						<!-- TODO -->
	                </div>
	                <!--低电历史信息-->
	                <div class="tab-pane" id="control-sidebar-settings-tab">
						<!-- TODO -->
	                </div>
	            </div>
            </div>
        </aside>

        <script type="text/javascript">
        //点击历史消息按钮，根据设备类型画柱状图
        //var alarmDateArr;

			
			 $(document).on('click',function(){ 
				$('.openPublicSidebar').removeClass("control-sidebar-open")
			});   
			
			$('.openPublicSidebar').on('click',function(){ 
				$('.openPublicSidebar').addClass("control-sidebar-open")
				return false;
			}); 
       	 $(".historybtn .alarmhistorybtn").off().on("click",function (){
			$(this).addClass("active").siblings().removeClass("active");
			$(".historyList .tab-pane").eq(1).addClass("active").siblings().removeClass("active");
			return false;
			}); 
		$(".historybtn .faulthistorybtn").off().on("click",function (){
			$(this).addClass("active").siblings().removeClass("active");
			$(".historyList .tab-pane").eq(0).addClass("active").siblings().removeClass("active");
			return false;
		}); 
		$(".historybtn .lowhistorybtn").off().on("click",function (){
			$(this).addClass("active").siblings().removeClass("active");
			$(".historyList .tab-pane").eq(2).addClass("active").siblings().removeClass("active");
			return false;
		}); 
        $(".historyTwinkle").on("click",function (){
        	//if($(".control-sidebar.control-sidebar-open").length=="1"){
        	//control-sidebar   control-sidebar-open
          	/* if(devType == "smokeDetector"){
          		sevenAlarmSum ();
          		 alarmBar();
          	} */
          	if($(".control-sidebar.control-sidebar-open")){
          	var alarmDateArr=[];
        	var alarmTypeCode;
        	var deviceTypeId;
        	if(devHeader == "smokeHeader"){
        		$(".alarmhistorybtn i").removeClass("cover-alarm-tab").addClass("fire-alarm-tab");
        		alarmTypeCode = "001";
        		deviceTypeId = "001";
          		sevenAlarmSum (alarmTypeCode,deviceTypeId,alarmDateArr);
       		 alarmBar(alarmDateArr);
        	}else if(devHeader == "manholeCoverHeader"){
        		$(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
        		deviceTypeId = "005";
        		alarmTypeCode = "010";
          		sevenAlarmSum (alarmTypeCode,deviceTypeId,alarmDateArr);
       		 alarmBar(alarmDateArr);
        	}else if(devHeader == "humitureHeader"){
         		$(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
        		deviceTypeId = "007";
        		alarmTypeCode = "061";
          		sevenAlarmSum (alarmTypeCode,deviceTypeId,alarmDateArr);
       		 	alarmBar(alarmDateArr); 
   
        	}
        	
        	return false;
          	}
          }); 

	       // 基于准备好的dom，初始化echarts实例
	       var myChart = echarts.init(document.getElementById('myChart'));
	       /* x轴坐标 */
	       var sevenDayX = [
	    	   moment().add('days',-6).format('DD'+'日'),
	    	   moment().add('days',-5).format('DD'+'日'),
	    	   moment().add('days',-4).format('DD'+'日'),
	    	   moment().add('days',-3).format('DD'+'日'),
	    	   moment().add('days',-2).format('DD'+'日'),
	    	   moment().add('days',-1).format('DD'+'日'),
	    	   moment().add('days',0).format('DD'+'日'),
	    	   ];
	       /* 判断请求的日期与坐标轴的日期是否相等 */
	       var sevenDay = [
	    	   moment().add('days',-6).format('YYYY-MM-DD'),
	    	   moment().add('days',-5).format('YYYY-MM-DD'),
	    	   moment().add('days',-4).format('YYYY-MM-DD'),
	    	   moment().add('days',-3).format('YYYY-MM-DD'),
	    	   moment().add('days',-2).format('YYYY-MM-DD'),
	    	   moment().add('days',-1).format('YYYY-MM-DD'),
	    	   moment().add('days',0).format('YYYY-MM-DD'),
	    	   ];
	       /* 请求url传入的起止时间  */
	       var beginTime = moment().add('days',-6).format('YYYY-MM-DD')+" 00:00:00";
	       var endTime = moment().add('days',0).format('YYYY-MM-DD')+" 23:59:59";
           /* 获取实时的柱状图报警信息 */
           function alarmTime(time,alarmTypeCode,deviceTypeId) {
        	   //火警传来时，如果当天没有火警发生记为1，发生则加1
        	   if(alarmDateArr[sevenDay.length-1]){
                   if(sevenDay[sevenDay.length-1] == time){
                	   alarmDateArr[sevenDay.length-1]+=1;
        	       	   alarmBar();
                	   return alarmDateArr;
                   }else{
                	   sevenAlarmSum();
            	       alarmBar(alarmDateArr);
                   }
        	   }else{
        		   alarmDateArr[sevenDay.length-1] = 1;
    	       	   alarmBar(alarmDateArr);
            	   return alarmDateArr;
        	   }
           }
           function alarmTime1(){
             	var alarmDateArr=[];
            	var alarmTypeCode;
            	var deviceTypeId;
            	if(devHeader == "smokeHeader"){
            		$(".alarmhistorybtn i").removeClass("cover-alarm-tab").addClass("fire-alarm-tab");
            		alarmTypeCode = "001";
            		deviceTypeId = "001";
              		sevenAlarmSum (alarmTypeCode,deviceTypeId,alarmDateArr);
           		 alarmBar(alarmDateArr);
            	}else if(devHeader == "manholeCoverHeader"){
            		$(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
            		deviceTypeId = "005";
            		alarmTypeCode = "010";
              		sevenAlarmSum (alarmTypeCode,deviceTypeId,alarmDateArr);
           		 alarmBar(alarmDateArr);
            	}else if(devHeader == "humitureHeader"){
            		$(".alarmhistorybtn i").removeClass("fire-alarm-tab").addClass("cover-alarm-tab");
            		deviceTypeId = "007";
            		alarmTypeCode = "061";
              		sevenAlarmSum (alarmTypeCode,deviceTypeId,alarmDateArr);
           		 	alarmBar(alarmDateArr);
            	}
           }
          /*  获取七天内报警数据 "/alarm/data/org/count/"+beginTime+"/"+endTime,/alarm/data/org/device/count?beginTime="+beginTime+"&endTime="+endTime+"&alarmTypeCode="+alarmTypeCode+"&deviceTypeId="+deviceTypeId, */
           function sevenAlarmSum (alarmTypeCode,deviceTypeId,alarmDateArr){
              $.ajax({
                    type : "GET",
                    url : "/alarm/data/org/device/count?beginTime="+beginTime+"&endTime="+endTime+"&alarmTypeCode="+alarmTypeCode+"&deviceTypeId="+deviceTypeId,
                    async : false, //同步执行
                    dataType : "json", //返回数据形式为json
                    success : function(result) {
                        if (result) {
                    	  for(var i=0;i<result.data.length;i++){
                    		  if(sevenDay[0]==result.data[i][0]){
	                    		   alarmDateArr[0] = result.data[i][1];
                    		  }else if(sevenDay[1]==result.data[i][0]){
	                    		   alarmDateArr[1] = result.data[i][1];
                    		  }else if(sevenDay[2]==result.data[i][0]){
	                    		   alarmDateArr[2] = result.data[i][1];
                    		  }else if(sevenDay[3]==result.data[i][0]){
	                    		   alarmDateArr[3] = result.data[i][1];
                    		  }else if(sevenDay[4]==result.data[i][0]){
	                    		   alarmDateArr[4] = result.data[i][1];
                    		  }else if(sevenDay[5]==result.data[i][0]){
	                    		   alarmDateArr[5] = result.data[i][1];
                    		  }else if(sevenDay[6]==result.data[i][0]){
	                    		   alarmDateArr[6] = result.data[i][1];
                    		  }
                    		   //alarmDateArr.push(result.data[i][1]);
                    	  }
                        }
                   },
                   error : function(errorMsg) {
                	   winTip.alert("不好意思，图表请求数据失败啦!");
                        myChart.hideLoading();
                      }
              });
                    return alarmDateArr;
                 };
                // alarmBar();
		function alarmBar (alarmDateArr) {
	       // 指定图表的配置项和数据
	       var option = {
	    	   color: ['#3398DB'],
	           title: {
	               //text: '七日内的报警统计',
	               textStyle: {  
	                   fontWeight: 'normal',              
	                   color: '#fff'  
	               },  
	           },
	           tooltip: {},
	           legend: {
	               data:['报警数量'],
	               x:"right",
	               padding:10,
	               textStyle: {  
	                   fontWeight: 'normal',              
	                   color: '#fff'  
	               },
	               selectedMode: false,//禁止点击
	           },
	           xAxis: {
	               data: sevenDayX,
	                axisLine:{  
	                    lineStyle:{  
	                        color:'#fff',  
	                        width:1
	                    },
	                },
	           },
	           yAxis: {
	               axisLine:{  
	                    lineStyle:{  
	                        color:'#fff',  
	                        width:1  
	                    }  
	                }, 
	           },
	           series: [{
	               name: '报警数量',
	               type: 'bar',
	               data:alarmDateArr,
	               /* barWidth:30, */
	        	   label:{
		        	   normal:{
		        	   show:true,            //显示数字
		        	   position: 'top' ,       //这里可以自己选择位置
		        	   color:'#fff',
		        	   }
	        	   },
	           }],
               grid:{

            	     left: '10',  
            	     right: '10',  
            	    bottom: '10',  
            	    top: '40',  
            	    containLabel: true
               },
	       };
	
	       // 使用刚指定的配置项和数据显示图表。
	       myChart.setOption(option);
		}
	   </script>
    </div>
</div>

</body>
</html>